<template>
  <view id="main">
    <!-- 顶部搜索框 -->
    <zy-topBar searchwidth="90%" scarchBottom showBack v-model="searchParam" @search="search" title="产废入库"
      paddingTop="50" height="40">
      <template #right>
        <view class="top_right">
          <view @tap="openPopup" class="item">
            <image src="@/static/icon/hand.png" />
          </view>
          <view @tap="gochoosewaste" class="item">
            <image src="@/static/icon/scan.png" />
          </view>
        </view>
      </template>
    </zy-topBar>
    <zy-tab :scrollable="true" lineColor="#0077FF" :activeStyle="{
      fontWeight: 'bold',
      transform: 'scale(1.3)',
      color: '#0077FF',
    }" lineWidth="120rpx" @click-tab="changeTab" v-model="current" :data="list"></zy-tab>
    <view class="content">
      <scroll-view scroll-y>
        <view>
          <view v-for="item in cerrentList" @tap="showDetail(item)" class="item card">
            <view class="title fs_17 color_black">
              {{ item.id }}
            </view>
            <view class="body">
              <view class="body_item flex">
                <view class="label">废物名称</view>
                <view class="value">{{ item.name }}</view>
              </view>
              <view class="body_item flex">
                <view class="label">废物代码</view>
                <view class="value">{{ item.code }}</view>
              </view>
              <view class="body_item flex">
                <view class="label">库存状态</view>
                <view class="value">{{ item.status }}</view>
              </view>
              <view class="body_item flex">
                <view class="label">入库时间</view>
                <view class="value">{{ item.putTime }}</view>
              </view>
              <view v-if="item.statusCode === '2'" class="body_item error flex">
                <view class="label">失败原因</view>
                <view class="value color_red">{{ item.errMsg }}</view>
              </view>
            </view>
            <view class="footer">
              <ZyBtn v-if="item.statusCode === '2'" backgroundColor="#eef3fc" color="#0D59D2">重新上报</ZyBtn>
              <ZyBtn v-if="item.statusCode === '2'" backgroundColor="#fcedf1" color="#E14146">删除</ZyBtn>
              <ZyBtn v-if="item.statusCode == '0'" backgroundColor="#eef3fc" color="#0D59D2">作废</ZyBtn>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup_content">
        <view class="title">手动新增</view>
        <view class="content">
          <view class="input_item">
            <input placeholder="请输入数字识别码" type="text">
          </view>
          <view class="batch flex">
            <label class="radio fs_14 color_text_gray flex">
              <radio style="transform:scale(0.7)" />
              <view>批量获取</view>
            </label>
          </view>
        </view>
        <view class="footer flex">
          <ZyBtn @tap="closePopup()" backgroundColor="#eef3fc" color="#0D59D2">取消
          </ZyBtn>
          <ZyBtn @tap="gochoosewaste">确定</ZyBtn>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import ZyBtn from "@/components/zy-btn/zy-btn.vue";
import { usePutStore } from "@/stores/modules/put/put";
const putStore = usePutStore();
const list = [
  { value: "0", name: "已入库" },
  { value: "1", name: "上报中" },
  { value: "2", name: "上报失败" },
  { value: "3", name: "已作废" },
];
const gochoosewaste = () => {
  popup.value.close();
  uni.navigateTo({
    url: `/pages/index/put/choosewaste/choosewaste`,
  });
}
// 弹窗
const popup: any = ref(null);
const openPopup = () => {
  popup.value.open();
};
const closePopup = () => {
  popup.value.close();
};
// 顶部搜索框
const searchParam = ref("");
const search = (val: string) => {
  console.log(val);
};
//跳转到详情页
const showDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/index/put/details/details?data=${JSON.stringify(item)}`,
  });
};
// tab切换
const current = ref("1"); // 当前tab索引
const cerrentList = ref(putStore.tableDataList);
onMounted(() => {
});
const changeTab = async (e: any) => {
  console.log(e);
  switch (e.value) {
    case "1":
      break;
    case "2":
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.top_right {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;

    image {
      width: 24px;
      height: 24px;
    }
  }


}

scroll-view {
  height: calc(100vh - 148px);
  padding-bottom: 10px;

  .item {
    width: 92%;
    margin: 20px auto;

    .title {
      word-break: break-all;
    }

    .body {
      margin: 10px 0;

      .body_item {
        font-size: 14px;
        margin-bottom: 10px;

        .label {
          margin-right: 10px;
          color: #7C8190;
          white-space: nowrap;
        }

        .value {
          color: #1D2541;
        }

        &.error {
          align-items: flex-start;

          .value {
            color: #E14146;
            word-break: break-all;
            width: 90%;
          }
        }
      }
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .zk_btn {
        margin: 0 10px;
        font-size: 14px;
        height: 30px !important;
        line-height: 30px !important;
      }
    }
  }
}

.popup_content {
  height: 220px;
  width: 100%;
  background: #fff;
  border-radius: 8px 8px 0 0;
  padding: 20px 20px 40px 20px;

  .content {
    margin: 20px 0;

    .input_item {
      margin-bottom: 8px;

      input {
        border: 1px solid rgb(0, 119, 255);
        border-radius: 8px;
        /* bg/选中 */
        background: rgb(238, 245, 255);
        padding: 4px 10px;
        height: 40px;
        line-height: 40px;
      }
    }
  }

  .footer {
    justify-content: center;

    .zk_btn {
      width: 30%;
      margin: 0 20px;
    }
  }
}
</style>
